<template>
<div class="select-tag-wrapper">
  <search-header ref="header" searchPlaceHolder="搜索标签" @submitSearch="search" @removeSearch="removeSearch"></search-header>
  <div class="group" style="margin-top: 15px">
    <div class="title">热门标签</div>
    <div class="content">
      <p @click="selectTag(tag)" class="tag" v-for="tag in hotTags" :key="tag.id">#{{tag.name}}#</p>
    </div>
  </div>
  <div class="group" style="margin-top: 35px">
    <div class="title">
      <div>常用标签<span style="color: #e54141; font-size: 13px; margin-left: 5px;">(长按删除)</span></div>
      <div @click="removeAllTag"><i class="fa fa-trash-o" aria-hidden="true"></i></div>
    </div>
    <div class="content">
      <p @click="selectTag(tag)" class="tag" v-for="tag in myTags" :key="tag.id" @touchstart="toDeleteTag(tag)" @touchend="clearLongTouch">#{{tag.name}}#</p>
    </div>
  </div>
  <ul class="macth" v-if="showMatch" :style="{top: macthTop + 'px'}">
    <li v-for="tag in matchTags" :key="tag.id" @click="selectTag(tag)">{{tag.name}}</li>
  </ul>
</div>
</template>

<script>
import SearchHeader from '@/components/seach-header/seach-header'

import axios from '@/api/axiosApi'
import { localTag } from '@/assets/js/local'

export default {
  data () {
    return {
      hotTags: [],
      myTags: [],
      matchTags: [],
      macthTop: 0,
      showMatch: false
    }
  },
  mounted () {
    this.macthTop = this.$refs.header.$el.clientHeight
  },
  components: {
    SearchHeader
  },
  created () {
    this._getHotTag()
    this.myTags = localTag.get() || []
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    _getHotTag () {
      axios.get(this, '/v1/tag', {
        hotTag: 1,
        pageSize: 10
      }, (data) => {
        this.hotTags = data
      })
    },
    search (value) {
      this.showMatch = true
      axios.get(this, '/v1/tag', {
        pageSize: 10,
        name: value
      }, (data) => {
        this.matchTags = data
      })
    },
    removeSearch () {
      this.showMatch = false
    },
    selectTag (tag) {
      const findIndex = this.$parent.tags.findIndex(item => {
        return item.id === tag.id
      })
      if (findIndex < 0) {
        this.$parent.tags.push({
          id: tag.id,
          name: tag.name
        })
      }
      this.$router.go(-1)
    },
    toDeleteTag (tag) {
      if (this.longTouch) {
        this.clearLongTouch()
      }
      const _self = this
      this.longTouch = setTimeout(() => {
        localTag.remove(tag.id)
        _self.myTags = localTag.get() || []
      }, 1500)
    },
    clearLongTouch () {
      clearInterval(this.longTouch)
    },
    removeAllTag () {
      localTag.removeAll()
      this.myTags = localTag.get() || []
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'

.select-tag-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $color-background;
  z-index: 102;

  .group {
    padding: 0 15px;
    .title {
      color: #999;
      line-height: 1.8;
      display: flex;
      justify-content: space-between;

      i {
        font-size: 19px;
        padding: 0 8px;
      }
    }

    .content {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      color: #fff;
      .tag {
        background: $color-border;
        margin-top: 6px;
        margin-right: 12px;
        padding: 0 8px;
        border-radius: 3px;
        &:hover, &:focus {
          background: #bfbfbf;
        }
      }
    }
  }

  .macth {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding: 7px 15px;
    list-style: none;

    li {
      border-bottom: 1px solid #e6e6e6;
      padding: 7px;
    }
  }
}
</style>
